const container = document.getElementById('container')
const circle = document.getElementById('circle')
const max = circle.children.length

let currentIndex = 0

const acitve = () => {
  const items = circle.querySelectorAll('.item')
  items.forEach((item, index) => {
    const itemInner = item.querySelector('.item-inner')
    if (index === currentIndex) {
      itemInner.classList.add('active')
    } else {
      itemInner.classList.remove('active')
    }
  })
}
const next = () => {
  if (currentIndex < max - 1) {
    currentIndex += 1
  }

  if (currentIndex < max - 1) {
    container.style.setProperty('--progress', 50)
    circle.style.transform = `translateX(-50%) rotate(${15 * (currentIndex - 1)}deg)`
  } else {
    container.style.setProperty('--progress', 100)
  }

  acitve()
}

const prev = () => {
  if (currentIndex > 0) {
    currentIndex -= 1
  }

  if (currentIndex > 0) {
    container.style.setProperty('--progress', 50)
    circle.style.transform = `translateX(-50%) rotate(${15 * (currentIndex - 1)}deg)`
  } else {
    container.style.setProperty('--progress', 33.33)
  }

  acitve()
}